<template>
    <div class="account">
        <div id="separator">My Account</div>
        <div class="order">
            <div id="editBtnLine"><div id="editBtn" @click="handleClick">{{ edit ? 'SAVE' : 'EDIT' }}</div></div>
            <div class="title small">Account Information</div>
            <div class="inputLine">
                <div class="label">First name:</div>
                <input type="text" v-model="account.firstName" :disabled="!edit" :class="{'editLine': edit}" />
            </div>
            <div class="inputLine">
                <div class="label">Last name:</div>
                <input type="text" v-model="account.lastName" :disabled="!edit" :class="{'editLine': edit}" />
            </div>
            <div class="inputLine">
                <div class="label">Address 1:</div>
                <input type="text" v-model="account.address1" :disabled="!edit" :class="{'editLine': edit}" />
            </div>
            <div class="inputLine">
                <div class="label">Address 2:</div>
                <input type="text" v-model="account.address2" :disabled="!edit" :class="{'editLine': edit}" />
            </div>
            <div class="inputLine">
                <div class="label">City:</div>
                <input type="text" v-model="account.city" :disabled="!edit" :class="{'editLine': edit}" />
            </div>
            <div class="inputLine">
                <div class="label">State:</div>
                <input type="text" v-model="account.state" :disabled="!edit" :class="{'editLine': edit}" />
            </div>
            <div class="inputLine">
                <div class="label">Zip:</div>
                <input type="text" v-model="account.zip" :disabled="!edit" :class="{'editLine': edit}" />
            </div>
            <div class="inputLine">
                <div class="label">Country:</div>
                <input type="text" v-model="account.country" :disabled="!edit" :class="{'editLine': edit}" />
            </div>

            <div class="title small" style="margin-top: 40px">Orders</div>
            <div v-for="(order, index) of orders" :key="`order-${index}`" class="itemLine">
                <div class="title item">{{ order.orderId }}</div>
                <div class="title item">{{ order.orderStatus[0].status }}</div>
                <div class="title item" style="margin-left: 30px">{{ order.orderDate }}</div>
                <nuxt-link class="button" :to="`/order/${order.orderId}`">Detail &gt;</nuxt-link>
                <div class="title item" style="float:right; margin-right: 50px">￥{{ order.totalPrice.toFixed(2) }}</div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapActions, mapState, mapMutations } from 'vuex'

export default {
    data() {
        return {
            account: {
                username: '',
                password: '',
                repeatPassword: '',
                firstName: '',
                lastName: '',
                email: '',
                phone: '',
                address1: '',
                address2: '',
                city: '',
                state: '',
                zip: '',
                country: ''
            },
            edit: false,
            orders: []
        }
    },
    methods: {
        ...mapActions({
            getAccountByUsername: 'account/getAccountByUsername',
            updateAccount: 'account/updateAccount',
            getOrderListByUserID: 'order/getOrderListByUserID'
        }),
        ...mapMutations({
            setAccount: 'account/setAccount',
            setSignIn: 'account/setSignIn'
        }),
        handleClick() {
            if(!this.edit) {
                this.edit = true
            }
            else {
                this.updateAccount(this.account).then((res) => {
                    this.setAccount(this.account)
                    this.edit = false
                }, (error) => {
                    console.log(error)
                })
            }
        }
    },
    computed: {
        ...mapState({
            accountStore: state => state.account.account,
            signIn: state => state.account.signIn
        })
    },
    mounted() {
        if(this.signIn === false || this.accountStore === null) {
            this.$router.push('/login')
        }
        this.getAccountByUsername(this.accountStore.username).then((res) => {
            this.setAccount(res)
            this.setSignIn(true)
            this.account = res
        }, (error) => {console.log(error)})

        this.getOrderListByUserID(this.accountStore.username).then((res) => {
            let orderList = []
            for(let order of res) {
                let date = new Date(order.orderDate.time)
                order.orderDate = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDay()}`
                orderList.push(order)
            }
            this.orders = orderList
        }, (error) => {console.log(error)})
    }
}
</script>

<style lang="scss" scoped>
#separator {
    border: none;
    border-bottom: 3px solid #364462;
    text-align: center;
    overflow: hidden;
    width: 25%;
    margin: 35px auto;
    font-size: 2em;
    color: #364462;
}

.order {
    width: 55%;
    margin: 40px auto 60px auto;
    color: #833d1e;
    border-radius: 3px;
    background-color: #efe7db;
    box-shadow: 2px 2px 15px #78a686;
    padding: 1px;
    overflow: hidden;
    min-height: 300px;
    position: relative;
    padding-bottom: 70px;
    .showWindow {
        animation: show 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
    }
    .inputLine
    {
        width: 100%;
        height: 50px;
        overflow: hidden;
        margin-top: 25px;
        margin-left: 0;
        margin-right: 0;
    }
    .inputLine>.label
    {
        float: left;
        position: relative;
        height: 26px;
        top: 24px;
        font-size: 1.3em;
        width: 16%;
        margin: 0 0 0 20%;
    }

    .inputLine>input
    {
        outline: none;
        width: 36%;
        color: #833d1e;
        height: 30px;
        position: relative;
        border: none;
        font-size: 1.2rem;
        top: 18px;
        float: left;
        background: transparent;
        &.editLine {
            top: 15px;
            font-size: 1.1rem;
            border-bottom: 3px solid #833d1e;
        }
    }
    #editBtnLine
    {
        width: 100%;
        height: 50px;
        overflow: hidden;
        position: relative;
        margin-top: 2%;
    }

    #editBtn
    {
        position: absolute;
        right: 5%;
        width: 10%;
        text-align: center;
        height: 40px;
        border: 3px solid #833d1e;
        font-size: 1.1em;
        border-radius: 5px;
        line-height: 40px;
        cursor: pointer;
        transition: all 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53);
    }

    #editBtn:hover
    {
        color: #efe7db;
        background-color: #833d1e;
        user-select: none;
    }

    .title{
        border: none;
        text-align: center;
        overflow: hidden;
        margin: 10px auto 0 auto;
        font-size: 2em;
        color: #833d1e;
        &.small {
            font-size: 1.3rem;
        }
        &.item {
            font-size: 1.3rem;
            margin: 0 0 0 25px;
            line-height: 70px;
            float: left;
        }
    }
    .itemLine
    {
        width: 75%;
        height: 70px;
        overflow: hidden;
        margin: 0 auto;
        border-bottom: 3px solid #833d1e;
    }
    .button
    {
        cursor: pointer;
        text-align: center;
        line-height: 35px;
        transition: all 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53);
        border: 3px solid #507e64;
        color: #507e64;
        width: 100px;
        height: 40px;
        margin: 14px 20px 0 0;
        border-radius: 8px;
        font-size: 1.1em;
        float: right;
    }

    .button:hover
    {
        background-color: #507e64;
        color: #efe7db;
    }
}
</style>